<template>
  <div :id="id" :ref="id" @click="clickAround"></div>
</template>

<script>
import * as echarts from "echarts";
import mapJson from "./330421.json";

export default {
  props: {
    id: {
      type: String,
      default: "map",
    },
    mapData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      map: null,
      option: {},
      curArea: null,
    };
  },
  watch: {
    mapData() {
      if (this.map) {
        this.setOption(false);
      } else {
        this.initMap();
      }
    },
  },
  mounted() {
    console.log(this.mapData)
    this.initMap();
  },
  beforeDestroy() {
    if (this.map) {
      this.map.dispose();
      this.map = null;
    }
  },
  methods: {
    clickAround() {
      if (this.curArea) {
        this.curArea = null;
        this.$emit("change", null);

        echarts.registerMap("嘉善县", mapJson);
        this.option.series[0].map = "嘉善县";
        this.map.setOption(this.option, false);
      }
    },
    async initMap() {
      this.map = echarts.init(this.$refs[this.id]);

      this.option = {
        series: [
          {
            name: "安全生产",
            type: "map",
            map: "嘉善县",
            roam: false,
            zoom: 1.2,
            aspectScale: 0.88,
            itemStyle: {
              fontWeight: 700,
              borderColor: "#43ACF9",
              borderWidth: 2,
              borderType: [4, 5],
              borderDashOffset: 4,
              areaColor: "#082667",
            },
            emphasis: {
              itemStyle: {
                borderColor: "#16fff0",
                borderWidth: 3,
                areaColor: "rgba(21,242,183,0.7)",
              },
              label: {
                show: true,
                fontSize: 15,
                fontWeight: "bold",
                color: "#ffffff",
                formatter: (params) => {
                  return [
                    "{dot" +
                      (params.data.status || "") +
                      "|}" +
                      "{name|" +
                      params.data.name +
                      "}",
                    "{count|数字激活数: " + (params.data.count || 0) + "}",
                    "{percent|主体履责率: " + (params.data.percent || 0) + "%}",
                  ].join("\n");
                },
                rich: {
                  dot: {
                    width: 14,
                    height: 14,
                    borderRadius: 7,
                    backgroundColor: "#aaa",
                    align: "left",
                    shadowColor: "rgba(100, 226, 112, 0.48)",
                    shadowBlur: 4,
                    shadowOffsetX: 0,
                    shadowOffsetY: 2,
                  },
                  dot1: {
                    width: 14,
                    height: 14,
                    borderRadius: 7,
                    backgroundColor: "#00FF00",
                    align: "left",
                    shadowColor: "rgba(100, 226, 112, 0.48)",
                    shadowBlur: 4,
                    shadowOffsetX: 0,
                    shadowOffsetY: 2,
                  },
                  dot2: {
                    width: 14,
                    height: 14,
                    borderRadius: 7,
                    backgroundColor: "#FFFF00",
                    align: "left",
                    shadowColor: "rgba(100, 226, 112, 0.48)",
                    shadowBlur: 4,
                    shadowOffsetX: 0,
                    shadowOffsetY: 2,
                  },
                  dot3: {
                    width: 14,
                    height: 14,
                    borderRadius: 7,
                    backgroundColor: "#FF6100",
                    align: "left",
                    shadowColor: "rgba(100, 226, 112, 0.48)",
                    shadowBlur: 4,
                    shadowOffsetX: 0,
                    shadowOffsetY: 2,
                  },
                  dot4: {
                    width: 14,
                    height: 14,
                    borderRadius: 7,
                    backgroundColor: "#FF0000",
                    align: "left",
                    shadowColor: "rgba(100, 226, 112, 0.48)",
                    shadowBlur: 4,
                    shadowOffsetX: 0,
                    shadowOffsetY: 2,
                  },
                  name: {
                    color: "#14E1FF",
                    fontSize: 16,
                    lineHeight: 24,
                    fontWeight: "bold",
                    align: "left",
                    padding: [0, 0, 0, 4],
                  },
                  count: {
                    fontSize: 10,
                    lineHeight: 18,
                    align: "left",
                    padding: [0, 0, 0, 18],
                  },
                  percent: {
                    fontSize: 10,
                    lineHeight: 18,
                    align: "left",
                    padding: [0, 0, 0, 18],
                  },
                },
              },
            },
            select: {
              itemStyle: {
                fontWeight: 700,
                borderColor: "#43ACF9",
                borderWidth: 2,
                borderType: [4, 5],
                borderDashOffset: 4,
                areaColor: "#082667",
              },
              label: {
                color: "#ffffff",
              },
            },
            label: {
              show: true,
              fontSize: 15,
              fontWeight: "bold",
              color: "#ffffff",
              formatter: (params) => {
                return [
                  "{dot" +
                    (params.data.status || "") +
                    "|}" +
                    "{name|" +
                    params.data.name +
                    "}",
                  "{count|数字激活数: " + (params.data.count || 0) + "}",
                  "{percent|主体履责率: " + (params.data.percent || 0) + "%}",
                ].join("\n");
              },
              rich: {
                dot: {
                  width: 14,
                  height: 14,
                  borderRadius: 7,
                  backgroundColor: "#aaa",
                  align: "left",
                  shadowColor: "rgba(100, 226, 112, 0.48)",
                  shadowBlur: 4,
                  shadowOffsetX: 0,
                  shadowOffsetY: 2,
                },
                dot1: {
                  width: 14,
                  height: 14,
                  borderRadius: 7,
                  backgroundColor: "#00FF00",
                  align: "left",
                  shadowColor: "rgba(100, 226, 112, 0.48)",
                  shadowBlur: 4,
                  shadowOffsetX: 0,
                  shadowOffsetY: 2,
                },
                dot2: {
                  width: 14,
                  height: 14,
                  borderRadius: 7,
                  backgroundColor: "#FFFF00",
                  align: "left",
                  shadowColor: "rgba(100, 226, 112, 0.48)",
                  shadowBlur: 4,
                  shadowOffsetX: 0,
                  shadowOffsetY: 2,
                },
                dot3: {
                  width: 14,
                  height: 14,
                  borderRadius: 7,
                  backgroundColor: "#FF6100",
                  align: "left",
                  shadowColor: "rgba(100, 226, 112, 0.48)",
                  shadowBlur: 4,
                  shadowOffsetX: 0,
                  shadowOffsetY: 2,
                },
                dot4: {
                  width: 14,
                  height: 14,
                  borderRadius: 7,
                  backgroundColor: "#FF0000",
                  align: "left",
                  shadowColor: "rgba(100, 226, 112, 0.48)",
                  shadowBlur: 4,
                  shadowOffsetX: 0,
                  shadowOffsetY: 2,
                },
                name: {
                  color: "#14E1FF",
                  fontSize: 16,
                  lineHeight: 24,
                  fontWeight: "bold",
                  align: "left",
                  padding: [0, 0, 0, 4],
                },
                count: {
                  fontSize: 10,
                  lineHeight: 18,
                  align: "left",
                  padding: [0, 0, 0, 18],
                },
                percent: {
                  fontSize: 10,
                  lineHeight: 18,
                  align: "left",
                  padding: [0, 0, 0, 18],
                },
              },
            },
            data: [],
          },
        ],
      };

      window.addEventListener("resize", () => {
        this.map && this.map.resize();
      });

      this.map.off("click");
      this.map.on("click", async (params) => {
        params.event.event.stopPropagation();

        if (this.curArea) {
          if (params.data.url) {
            window.open(params.data.url, "_blank");
          }
        } else {
          import(`./330421/${params.data.adcode}.json`)
            .then((res) => {
              this.curArea = params.data.id;
              this.$emit("change", params.data.id);

              echarts.registerMap(params.name, res);
              this.option.series[0].map = params.name;
              this.map.setOption(this.option, false);
            })
            .catch((error) => {
              console.error(error);
            });
        }
      });
      echarts.registerMap("嘉善县", mapJson);
      this.setOption(true);
    },
    setOption(flag) {
      this.option.series[0].data = this.dealOptionData();
      this.map.setOption(this.option, flag);
    },
    dealOptionData() {
      if (!this.mapData || this.mapData.length === 0) {
        return [];
      }

      let mapData = mapJson.features.map((item) => {
        return item.properties;
      });
      let data = mapData.map((item) => {
        const currIndex = this.mapData.findIndex((ele) => {
          return parseInt(ele.adcode) === parseInt(item.adcode);
        });
        if (currIndex > -1) {
          return Object.assign({}, this.mapData[currIndex], item);
        }
      });

      return data;
    },
  },
};
</script>